import React from 'react';
import './zhaomu_card.css';
import logo from '@/assets/12.jpg'
import { useNavigate } from 'react-router-dom';

interface zhaomu_cardProps {
    app: {
      title: string;
      tags: string[];
      description: string;
      publisher: string;
  };
}

const JobCard: React.FC<zhaomu_cardProps> = ({app}) => {
  const navigator = useNavigate();
  const handleInfo = () => {
    navigator('/dachuang/zhaomu/xiangqing')
  }
  return (
    <div className="job-card">
      <div className="job-card-logo">
        <img src={logo} alt="logo" />
      </div>
      <div className="job-card-details">
        <h2>{app.title}</h2>
        <div className="job-card-tags">
          {app.tags.map((tag, index) => (
              <span key={index} className="zhaomutag">{tag}</span>
            ))}
        </div>
        <h3>{app.publisher}</h3>
        <p>
          {app.description}
        </p>
        <div className="job-card-actions">
          <button className="zhaomubutton">立即申请</button>
          <button className="zhaomubutton" onClick={handleInfo}>了解更多</button>
        </div>
      </div>
    </div>
  );
};

export default JobCard;
